import {generatePageList} from "./utils";
const { VueLoaderPlugin } = require('vue-loader')
import webpack, {Configuration} from "webpack";
import CopyPlugin from "copy-webpack-plugin";
const resolveApp = require("./path");

export default {
    entry: {
        home: "./src/pages/Home/index.ts",
        about: "./src/pages/About/index.ts",

    },
    output: {
        path: resolveApp('./dist'),
        filename: 'js/[name].[hash:4].js', // entry 中定义的 home about
        publicPath: '/',
    },
    resolve: { // 自动识别对应后缀的文件
        extensions: ['.ts', '.tsx', '.vue', '.js'],
        alias: {  // 这里就是需要配置resolve里的别名
            "@/": resolveApp("./src"), // path记得引入
            'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
        },
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.js` 文件
            // 以及 `.vue` 文件中的 `<script>` 块
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.tsx?$/,
                // loader: 'ts-loader',
                use: [
                    'babel-loader',
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                            appendTsSuffixTo: [/\.vue$/]
                        }
                    }

                ]
            },

            {
                test: /.(png|jpe?g|svg|gif)$/,
                type: 'asset', // 使用 webpack5 解析图片资源
                generator: {
                    filename: "assets/images/[name].[hash:4][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 25 * 1024  // 大于 25k 直接打复制到 dist/img 目录中(file-loader)，小于 25k 内置到 index.html(url-loader)
                    }
                }
            },
        ]
    },
    plugins: [
        ...generatePageList(),
        // 请确保引入这个插件来施展魔法
        new VueLoaderPlugin(),
        // https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags
        new webpack.DefinePlugin({
            "__VUE_OPTIONS_API__ ": true,
            "__VUE_PROD_DEVTOOLS__ ": false
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: "./public",
                    to: resolveApp('./dist/public'),
                    globOptions: {
                        ignore: ["**/index.html"], // **/ 表示在当前public目录下查找
                    },
                },
            ],
        }),
    ]
}as Configuration